<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>大麦商城</title>
<link href="css/common.css" rel="stylesheet" type="text/css"/>
<link href="css/login.css" rel="stylesheet" type="text/css"/>
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="js/header.js"></script>
<script type="text/javascript">
	function checkImg(){
		// 更新验证码
	}
</script>
</head>
<body>
<div id="app">
<top ref="t"></top>
<div class="container login">
		<div class="span12">
<div class="ad">
	<img src="image/login.jpg" width="500" height="330" alt="会员登录" title="会员登录">
</div>		
</div>
		<div class="span12 last">
			<div class="wrap">
				<div class="main">
					<div class="title">
						<strong>会员登录</strong>USER LOGIN
					</div>
					<div class="title">
						
					</div>
					<form id="loginForm" action="login.html"  method="post" novalidate="novalidate">
						<table>
							<tbody><tr>
								<th>
										用户名:
								</th>
								<td>
									<input type="text" id="username" name="username" class="text" maxlength="20" v-model="username"/><span></span>
								</td>
							</tr>
							<tr>
								<th>
									密&nbsp;&nbsp;码:
								</th>
								<td>
									<input type="password" id="password" name="password" class="text" maxlength="20" autocomplete="off" v-model="password"/><span></span>
								</td>
							</tr>
								<tr>
									<th>
										验证码:
									</th>
									<td>
										<span class="fieldSet">
											<input type="text" id="captcha" name="captcha" class="text captcha" maxlength="4" autocomplete="off" v-model="code"><img style="width: 120px; height: 30px;" id="captchaImage" class="captchaImage" :src="imgsrc" title="" alt="" title="验证码" onclick="checkImg()">
										</span>
									</td>
								</tr>
							<tr>
								<th>&nbsp;
									
								</th>
								<td>
									<label>
										<input type="checkbox" id="isRememberUsername" name="isRememberUsername" value="true">记住用户名
									</label>
									<label>
										&nbsp;&nbsp;<a >找回密码</a>
									</label>
								</td>
							</tr>
							<tr>
								<th>&nbsp;
									
								</th>
								<td>
									<input type="submit" class="submit" value="登 录" @click.prevent="login">
									<input type="submit" class="submit" value="我的信息" @click.prevent="myinfo">
								</td>
							</tr>
							<tr class="register">
								<th>&nbsp;
									
								</th>
								<td>
									<dl>
										<dt>还没有注册账号？</dt>
										<dd>
											立即注册即可体验在线购物！
											<a href="./会员注册.htm">立即注册</a>
										</dd>
									</dl>
								</td>
							</tr>
						</tbody></table>
					</form>
				</div>
			</div>
		</div>
	</div>
<div class="container footer">
	<div class="span24">
	  <div class="footerAd"><img src="image/footer.jpg" width="950" height="52" alt="我们的优势" title="我们的优势" /></div>	
	</div>
	<div class="span24">
		<ul class="bottomNav">
					<li>
						<a >关于我们</a>
						|
					</li>
					<li>
						<a>联系我们</a>
						|
					</li>
					<li>
						<a>招贤纳士</a>
						|
					</li>
					<li>
						<a>法律声明</a>
						|
					</li>
					<li>
						<a>友情链接</a>
						|
					</li>
					<li>
						<a>支付方式</a>
						|
					</li>
					<li>
						<a >配送方式</a>
						|
					</li>
					<li>
						<a>服务声明</a>
						|
					</li>
					<li>
						<a>广告声明</a>
						
					</li>
		</ul>
	</div>
	<div class="span24">
		<div class="copyright">Copyright © 2005-2013 Mango商城 版权所有</div>
	</div>
</div>
</div>
</body>
<script>
var v = new Vue({
	el : "#app",
	data : {
		username:'',
		password:'',
		code:'',
		imgsrc:''
	},
	methods : {
		login(){
			let p = new URLSearchParams();
			p.append('username', this.username);
			p.append('password', this.password);
			p.append('vcode', this.code);
			axios.post("damai-user/sign/login",p).then(res=>{
				console.info(res.headers.authorization);
				sessionStorage.setItem("jwt", res.headers.authorization);
				if(res.data.code == 1){
					//location.href = "./index.html";
					this.$alert(res.data.msg);
				}else{
					this.getCode();
					this.$message(res.data.msg);
				}
			});
		},
		myinfo(){
			var jwt = sessionStorage.getItem("jwt");
			axios.get("damai-user/sign/myinfo",{
				headers:{
					Authorization: jwt
				}
			}).then(res=>{
				console.info(res.data);
				this.$alert(res.data.msg);
			})
		},
		getCode(){
			axios({
				method: 'get',
				url: 'http://127.0.0.1/damai-user/vcode/image',
				responseType: 'blob',
			}).then((response) => {
				this.imgsrc = URL.createObjectURL(response.data);
			});
		}
	},
	created() {
		this.getCode();
	},
})
</script>
</html>